<script setup lang="ts">
  

import UserInfo from "~/components/UserInfo.vue";
import {Card, CardContent, CardFooter, CardHeader, CardTitle} from "~/components/ui/card";
import {Button} from "~/components/ui/button";
import type {TypeAllUserTours} from "~/utils/client";
import {toast} from "~/components/ui/toast";
import axios from "axios";

const getTours = async () => {
  const {data, error, response} = await client.getUserTours()
  if (data) {
    tours.value = data
    loaderState.value = false
  }
  if (error) {
    console.log(error)
  }
}

const tours = ref<TypeAllUserTours>()

const loaderState = ref(true)

const removeBookTour = async (id:number) => {
  const { data, error, response } = await client.removeBookTour(id)
  if (data) {
    toast({
      title: 'Бронь с тура успешно снята.'
    })
    await getTours()
  }
  if (error) {
    console.log(error)
  }
}

const payTour = async (id:number, sum:number) => {
  const response = await axios.get('https://yoomoney.ru/quickpay/confirm', {
    method: 'GET',
    params: {
      'receiver': '4100116109198047',
      'quickpay-form': 'button',
      'paymentType': 'AC',
      'sum': sum,
      'label': JSON.stringify({tour: id, user: 3}),
    }
  })
  navigateTo(response.request.responseURL, {external: true})
}



getTours()
</script>

<template>
  <Loader :show="loaderState"/>
  <main class="container flex flex-col justify-start items-center flex-grow">
    <UserInfo />
    <h2 class="text-3xl mt-5" v-show="tours">Мои туры</h2>
    <div class="grid grid-cols-3 gap-5">
      <Card v-for="tour in tours" :key="tour.id" class="flex flex-col" v-show="tours">
        <CardHeader>
          <CardTitle>{{tour.name}}</CardTitle>
        </CardHeader>
        <CardContent class="flex flex-col gap-5">
          <img :src="tour.image" :alt="tour.name" class="aspect-video rounded-xl">
          <p class="line-clamp-3">{{tour.description}}</p>
        </CardContent>
        <CardFooter class="flex-shrink-0 flex-grow flex flex-col justify-end gap-3">
          <Button class="w-full" @click="navigateTo(`/tour/${tour.id}`)" variant="outline">Подробнее</Button>
          <Button class="w-full" @click="payTour(tour.id, tour.price)" variant="default" v-if="!tour.isPaid">Оплатить</Button>
          <Button class="w-full" @click="removeBookTour(tour.id)" variant="destructive" v-if="!tour.isPaid">Отменить бронирование</Button>
        </CardFooter>
      </Card>
    </div>
  </main>
</template>

<style scoped>

</style>